<template>
  <div class="progress-warp">
    <div
      class="v-progress"
      :style="progressStyle"
      v-if="type === 'test'"
    >
      <div
        class="base"
        :style="_baseStyle"
      ></div>
      <div
        class="right-line"
        :style="_rightLineStyle"
      ></div>
      <div
        class="error-line"
        v-if="isTwoSchedule"
        :style="_errorLineStyle"
      ></div>
    </div>
    <div
      class="end-progress"
      v-if="type === 'end'"
    >
      <div
        class="aright"
        :style="{width: `${rightValue}%`}"
      >
        <div class="_icon">
          <img
            src="@/assets/img/camp/aright-icon.png"
            alt=""
          >
        </div>
      </div>
      <div
        class="wrong"
        :style="{width: `${wrongValue}%`}"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 底部颜色
    baseColor: {
      type: String,
      default: "rgba(255,255,255,0.2)"
    },
    // 底部高度
    baseHeight: {
      type: Number,
      default: 6
    },
    // 条颜色
    lineHeight: {
      type: Number,
      default: 8
    },
    // 正确进度
    rightValue: {
      type: Number,
      default: 0
    },
    // 错误进度
    wrongValue: {
      type: Number,
      default: 0
    },
    // 是否正确错误一起显示
    isTwoSchedule: {
      type: Boolean,
      default: false
    },
    // 正确颜色
    rightColor: {
      type: String,
      default: "#10DEE5"
    },
    // 错误颜色
    errorColor: {
      type: String,
      default: "#FFC76F"
    },
    // 类型  test: 进行中（细进度条）  end: 结束时（高进度条）
    type: {
      type: String,
      default: "test"
    }
  },
  computed: {
    progressStyle() {
      return {
        height: (100 / 750) * Math.max(this.baseHeight, this.lineHeight) + "vw"
      };
    },
    _baseStyle() {
      return {
        height: (100 / 750) * this.baseHeight + "vw",
        background: this.baseColor
      };
    },
    _rightLineStyle() {
      return {
        width: `${this.rightValue}%`,
        height: (100 / 750) * this.lineHeight + "vw",
        background: this.rightColor
      };
    },
    _errorLineStyle() {
      return {
        width: `${this.wrongValue}%`,
        height: (100 / 750) * this.lineHeight + "vw",
        background: this.errorColor
      };
    }
  }
};
</script>

<style lang="less" scoped>
.progress-warp {
  width: 100%;
}
.v-progress {
  width: 100%;
  position: relative;
  height: 8px;
}
.base {
  position: absolute;
  width: 100%;
  border-radius: 9999px;
  z-index: 7;
  box-sizing: content-box;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.right-line {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.1s;
  z-index: 9;
  border-radius: 9999px;
}
.error-line {
  position: absolute;
  top: 0;
  transform: rotate(-180deg);
  right: 0;
  transition: all 0.1s;
  border-radius: 9999px;
  z-index: 8;
}

.end-progress {
  position: relative;
  width: 100%;
  height: 96px;
  .aright {
    background-color: @camp-aright;
    position: absolute;
    border-radius: 0 48px 48px 0;
    height: 96px;
    left: 0;
    transition: width 0.3s;
    z-index: 9;
  }
  .wrong {
    position: absolute;
    background-color: @camp-wrong;
    border-radius: 48px 0px 0px 48px;
    height: 96px;
    right: 0;
    transition: width 0.3s;
  }
  ._icon {
    width: 64px;
    height: 64px;
    text-align: center;
    line-height: 64px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #fff;
    right: 20px;
    color: @camp-aright;
    img {
      width: 30px;
    }
  }
}
</style>
